<template>
  <div id="record">
    <HeaderBg>
      <Headers :title="$t('record.title')"/>
    </HeaderBg>
    <div class="tab-container">
      <ul>
        <li v-for="(item,index) in tabList" :key="index" @click="clickTab(index)">
          <div :class="{active:tabActive == index}">{{item}}</div>
        </li>
      </ul>
      <!-- 列表展示内容 -->
      <div class="list-container">
        <List :lists="lists"/>
      </div>
      <div v-if="lists.listArray.length == 0" class="noData">空空如也 ~</div>
    </div>
  </div>
</template>

<script>
import HeaderBg from "components/HeaderBg";
import List from "components/Lists";
export default {
  name: "record",
  data() {
    return {
      tabList: [
        this.$t("record.tabTotal"),
        this.$t("record.tabPaySucc"),
        this.$t("record.tabSKSucc")
      ],
      tabActive: 0,
      lists: {
        type: "details",
        listArray: []
      }
    };
  },
  methods: {
    clickTab(index) {
      this.tabActive = index;
      switch (this.tabActive) {
        case 0:
          this.lists.listArray = [
            {
              icon: require("../../../assets/conver_icon.png"),
              date: "2019-1-3 14:00:37",
              status: this.$t("asset.assetsDetail.conversion") + "ETH",
              money: "+150.00",
              color: "#F55685",
              recordStatus: this.$t("record.tabPaySucc")
            },
            {
              icon: require("../../../assets/payicon.png"),
              date: "2019-1-3 14:00:37",
              status: this.$t("asset.assetsDetail.pay"),
              money: "-150.00",
              color: "#F55685",
              recordStatus: this.$t("record.tabPaySucc")
            },
            {
              icon: require("../../../assets/coll_icon.png"),
              date: "2019-1-3 14:00:37",
              status: this.$t("asset.assetsDetail.collection"),
              money: "+150.00",
              color: "#01F8EF",
              recordStatus: this.$t("record.tabPaySucc")
            }
          ];
          break;
        case 1:
          this.lists.listArray = [];
          break;
        default:
          this.lists.listArray = [
            {
              icon: require("../../../assets/conver_icon.png"),
              date: "2019-1-3 14:00:37",
              status: this.$t("asset.assetsDetail.conversion") + "ETH",
              money: "+150.00",
              color: "#F55685",
              recordStatus: this.$t("record.tabPaySucc")
            }
          ];
          break;
      }
    }
  },
  mounted() {
    this.clickTab(0); // tab栏先手动调用一下
  },
  components: {
    HeaderBg,
    List
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../utils/styl/mixin.styl'
#record
  positCenter(0, 0, 0, 0, 0, 0)
  width 100%
  background-color $bodyBg
  .tab-container
    margin-top rem(150)
    ul
      display flex
      justify-content space-around
      border-bottom rem(1) solid $tabBarColor
      line-height rem(40)
      li
        flex 1
        color $fontColor
        font-size rem(15)
        height 100%
        div
          width 70%
          margin 0 auto
        .active
          border-bottom rem(3) solid $tabBarActive
  .noData
    margin-top rem(40)
    text-align center
    font-size rem(16)
    color $tabBarColor
</style>
